import AuthComponent from '@/components/Authorized/AuthComponent';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Button,
  message,
  DatePicker,
  Radio,
  Input,
  Select,
} from 'antd';
import React, { useState, useCallback, useRef, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
import { useRequest } from '@umijs/hooks';
import { queryviproomTable } from './service';
import moment from 'moment';
import styles from './index.less';
// let hiddenData = null;
const TableList = () => {
  const actionRef = useRef();
  const ref = useRef();
  const searchRef = useRef();
  const reloadTable = useCallback(function reloadData() {
    if (searchRef.current) {
      searchRef.current.click();
    }
  }, []);
  const [height, controlH] = useState(300);
  const [isCollapse, controlC] = useState(true);
  useEffect(() => {
    if (isCollapse) {
      controlH(document.body.clientHeight - 360);
    } else {
      controlH(document.body.clientHeight - 470);
    }
  }, [isCollapse])
  const formatFlightNo = (val) => {
    if (!val) {
      return '';
    } else if (val.length < 3 || /^\D/.test(val)) {
      return ''.toUpperCase.call(val);
    } else if (/^\d{2}/.test(val)) {
      return `3U${val}`;
    } else {
      return val;
    }
  }
  const [inited, setInited] = useState(false);
  const [firstLoadDate, setFirstLoadDate] = useState(true);
  useEffect(() => {
    if (actionRef.current && inited) {
       reloadTable();
    } else {
      setInited(true);
    }
  }, [inited]);
    // 切换清空搜索
  //   useEffect(() => {
  //     hiddenData = null
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  //   }, [])

  // 获取列表详情方法
  const beforeSearchSubmit = useCallback(params => {
    params['sellDateBegin'] = params.sellDateBegin ? params.sellDateBegin.format('YYYY-MM-DD') : '';
    params['sellDateEnd'] = params.sellDateEnd ? params.sellDateEnd.format('YYYY-MM-DD') : '';
    if (!isCollapse) {
      return { ...params}
    } else {
      if (event&&event.target&&event.target.querySelector&&event.target.querySelector('span') && event.target.querySelector('span').innerText === '查 询') {
        if (Object.keys(params).indexOf('sellDateBegin') === -1) {
          params.sellDateBegin = ''
        }
        if (Object.keys(params).indexOf('sellDateEnd') === -1) {
          params.sellDateEnd = ''
        }
      } else if (event&&event.target&&event.target.querySelector&&event.target.querySelector('span') && event.target.querySelector('span').innerText === '重 置') {
        ref.current.setFieldsValue({
          sellDateBegin: moment(),
          sellDateEnd: moment()
        })
        // hiddenData = {}
      }
      // return { ...hiddenData, ...params}
      return { ...params}
    }
  }, []);

  const [selectedRowKeys, handleSelectedRowKeys] = useState([]) // 勾选索引
  const [selectedRows, handleSelectedRows] = useState([]) // 勾选列
  const [searchParams, handleSearchParams] = useState() // 存储搜索条件
  const columns = [
     {
    title: '旅客姓名',
    dataIndex: 'paxName',
    width: 100,
    },
    {
      title: '证件号码',
      dataIndex: 'paxNo',
      width: 100,
    },
    {
      title: '产品名称',
      hideInSearch: true,
      dataIndex: 'itemName',
      width: 100,
    },
    {
      title: '价格',
      hideInSearch: true,
      dataIndex: 'price',
      width: 80,
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
      width: 90,
    },
     {
      title: '销售日期',
      dataIndex: 'sellDate',
      width: 100,
      hideInSearch: true
      },
      {
        title: '就近贵宾室',
        hideInSearch: true,
        dataIndex: 'remoteRoom',
        width: 100,
      },
      {
        title: '航班号',
        dataIndex: 'flightNo',
        key: 'flightNo',
        width: 90,
        required: true,
        renderFormItem: (_, { defaultRender, ...rest }) => {
          return (
            <Input
              {...rest}
              onChange={e => {
                e.target.value = formatFlightNo(e.target.value);
                rest.onChange(e.target.value)
              }}
              maxLength={6}
              placeholder="3U"
            />
          );
        },
      },
      {
        title: '登机口',
        hideInSearch: true,
        dataIndex: 'gate',
        width: 90,
      },
      {
        title: '进入时间',
        hideInSearch: true,
        dataIndex: 'entryTime',
        width: 100,
      },
      {
        title: '离开时间',
        hideInSearch: true,
        dataIndex: 'leaveTime',
        width: 100,
      },
      {
        title: '销售人员',
        hideInSearch: true,
        dataIndex: 'seller',
        width: 100,
      },
       {
        title: '旅客状态',
        key:'status',
        dataIndex: 'status',
        initialValue: '',
        width: 100,
        filters: [
          {text: '待使用', value: '待使用'},
          {text: '已迎接', value: '已迎接'},
          {text: '已送别', value: '已送别'},
          {text: '已拒绝', value: '已拒绝'},
          {text: '撤销', value: '撤销'},
        ],
        valueEnum: {
          '': '全部',
          '0': '待使用',
          '1': '已迎接',
          '2': '已送别',
          '3': '已拒绝',
          '4': '撤销'
        },
      },
    {
      title: '销售起始日期',
      order:3,
      hideInTable: true,
      dataIndex: 'sellDateBegin',
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{width: '100%'}}
            format={format}
            {...rest}
          />
        );
      },
    },
    {
      title: '销售结束日期',
      order:2,
      hideInTable: true,
      dataIndex: 'sellDateEnd',
      renderFormItem: (_, { ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            style={{width: '100%'}}
            format={format}
            {...rest}
          />
        );
      }},
  ];
  // 选中添加值
  const tableSelectChange = (selectedRowKeys, selectedRows) => {
    handleSelectedRowKeys(selectedRowKeys);
    handleSelectedRows(selectedRows);
  };
  // 设置选中的值
  const rowSelection = {
    selectedRowKeys,
    onChange: tableSelectChange,
  };
  return (
    <>
      <ProTable
        scroll={{ x: 1200, y: height }}
        headerTitle={
          <>
            <span style={{ paddingRight: 10, fontWeight: 'bold', color: '#000' }}>贵宾室管理</span>
          </>
        }
        options={{density: false,fullScreen:true, reload:false, setting:true}}
        actionRef={actionRef}
        formRef={ref}
        dateFormatter="YYYY-MM-DD"
        size='small'
        className={`${styles.oversaleTable} rest-pro-table-form-compact ${isCollapse?'':'collapse'}`}
        search={{
          searchText: (
            <span ref={searchRef} href>
              查询
            </span>
          ),
          onCollapse: val => {
            controlC(val)
            // if (!val && hiddenData) {
            //   ref.current.setFieldsValue({
            //     paxNo:hiddenData.paxNo,
            //     orderNo: hiddenData.orderNo,
            //     status: hiddenData.status,
            //     // sellDateBegin: hiddenData.sellDateBegin,
            //     // sellDateEnd: hiddenData.sellDateEnd
            //   })
            // } else {
            //   hiddenData = ref.current.getFieldsValue()
            // }
          },
          span: { //设置排列方式
            xs: 24,
            sm: 24,
            md: 6,
            lg: 6,
            xl: 6,
            xxl: 6,
          }
        }}
        toolBarRender={() => [
        ]}
        beforeSearchSubmit={beforeSearchSubmit}
        request={params => {
          if (!params['sellDateBegin'] && !params['endState']&&firstLoadDate) {
            setFirstLoadDate(false)
            params['sellDateBegin'] = moment().format('YYYY-MM-DD');
            params['sellDateEnd'] = moment().format('YYYY-MM-DD');
            ref.current.setFieldsValue({
              sellDateBegin: moment(),
              sellDateEnd: moment()
            })
          }
          if (!params['paxName']) {
            ref.current.setFieldsValue({
              paxName: ''
            })
          }
          if (!params['paxNo']) {
            ref.current.setFieldsValue({
              paxNo: ''
            })
          }
          if (!params['orderNo']) {
            ref.current.setFieldsValue({
              orderNo: ''
            })
          }
          if (!params['status']) {
            ref.current.setFieldsValue({
              status: ''
            })
          }
          handleSearchParams(params);
          return queryviproomTable(params);
        }}
        postData={data => {
          return data
        }}
        columns={columns}
        rowSelection={rowSelection}
        rowKey="id"
        pagination={{
          showSizeChanger: true,
          showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 项`
        }}
      />
    </>
  );
};

export default Form.create()(TableList);
